<!-- 统计的关于时间日期选择的组件 -->
<template>
  <el-form
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
    size="mini"
    label-width="100px"
  >
    <el-form-item label="选择筛选项">
      <el-select v-model="filterItems" placeholder="请选择筛选项">
        <el-option label="年份" value="year"> </el-option>
        <el-option label="月份" value="month"> </el-option>
        <el-option label="日期" value="day"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选择年" v-show="filterItems == 'year'">
      <YearRangePicker
        :yearRange="yearRange"
        :key="`${yearRange[0]}_${yearRange[1]}`"
        @yearChanged="handleYearChanged"
      ></YearRangePicker>
    </el-form-item>
    <el-form-item label="选择月" v-show="filterItems == 'month'">
      <el-date-picker
        v-model="formInline.months"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="changeDate('month', $event)"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="{
          disabledDate(time) {
            // 判断时间是否在当前时间之后，如果是，则返回false，否则返回true（禁用）
            return time.getTime() > new Date().getTime()
          },
        }"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="日期选择" v-show="filterItems == 'day'">
      <el-date-picker
        v-model="formInline.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeDate('day', $event)"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="{
          disabledDate(time) {
            // 判断时间是否在当前时间之前，如果是，则返回false，否则返回true（禁用）
            return time.getTime() > new Date().getTime()
          },
        }"
      >
      </el-date-picker>
    </el-form-item>
    <!-- <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item> -->
  </el-form>
</template>

<script>
import moment from 'moment/moment'
import YearRangePicker from '@/components/YearRangePicker.vue'

export default {
  name: 'statDatePicker',
  components: { YearRangePicker },
  data() {
    return {
      // 初始化数据
      formInline: {
        years: '',
        months: [
          moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss'),
          moment().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
        ],
        date: [
          moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ],
      },
      filterItems: 'year',
      tableFirstTitle: '年份',
      searchData: {},

      yearRange: [moment().clone().subtract(1, 'years').year(), moment().year()],
    }
  },
  computed: {},
  watch: {
    yearRange(newVal) {
      const start = moment(newVal[0] + '-01-01').format('YYYY-MM-DD 00:00:00')
      const end = moment(newVal[1] + '-12-31').format('YYYY-MM-DD 23:59:59')
      this.searchData = {
        type: 'year',
        startDate: start,
        endDate: end,
      }
      this.$emit('search', this.searchData)
    },
    filterItems(newVal) {
      if (newVal === 'year') {
        const start = moment(this.yearRange[0] + '-01-01').format('YYYY-MM-DD 00:00:00')
        const end = moment(this.yearRange[1] + '-12-31').format('YYYY-MM-DD 23:59:59')
        this.searchData = {
          type: 'year',
          startDate: start,
          endDate: end,
        }
      } else if (newVal === 'month') {
        const endOfMonth = moment(this.formInline.months[1])
          .endOf('month')
          .format('YYYY-MM-DD HH:mm:ss')

        this.searchData = {
          type: newVal,
          startDate: this.formInline.months[0],
          endDate: endOfMonth,
        }
      } else if (newVal === 'day') {
        const endOfDay = moment(this.formInline.date[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.searchData = {
          type: newVal,
          startDate: this.formInline.date[0],
          endDate: endOfDay,
        }
      }
      this.$emit('search', this.searchData)
    },
  },
  created() {},
  mounted() {
    this.searchData = {
      type: 'year',
      startDate: moment().subtract(1, 'years').format('YYYY-01-01 00:00:00'),
      endDate: moment().format('YYYY-MM-DD 23:59:59'), //当前的月份
    }
  },
  methods: {
    onSubmit() {
      this.$emit('search', this.searchData)
    },
    handleYearChanged(val) {
      this.yearRange = val
    },
    changeDate(type, date) {
      if (type === 'month') {
        const endOfMonth = moment(date[1]).endOf('month').format('YYYY-MM-DD HH:mm:ss')

        this.searchData = {
          type: type,
          startDate: date[0],
          endDate: endOfMonth,
        }
      } else if (type === 'day') {
        const endOfDay = moment(date[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.searchData = {
          type: type,
          startDate: date[0],
          endDate: endOfDay,
        }
      }
      this.$emit('search', this.searchData)
    },
  },
}
</script>
<style lang="less" scoped></style>
